<template>
  <!-- 合同款项情况 -->
    <CommonTitle
            :titleName="state.type == 1 ? '招标合同协同审批' : '合同初稿'"
    ></CommonTitle>

    <div class="box">
        <el-form
                :inline="true"
                label-width="140"
                :model="formInline"
                ref="formRef"
                class="demo-form-inline"
        >
<!--            :rules="rules"-->
            <el-row>
                <el-col :span="8">
                    <el-form-item label="合同名称" prop="contractName">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractName"
                                placeholder="请输入合同名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同类型" prop="typeContract">
                        <el-select
                                :disabled="state.disabled"
                                v-model="formInline.typeContract"
                                placeholder="请选择合同类型"
                        >
                            <el-option label="招标合同" :value="1" />
                            <el-option label="投资合同" :value="2" />
                            <el-option label="建设合同" :value="3" />
                            <el-option label="其他合同" :value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同编码" prop="contractNumber">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractNumber"
                                placeholder="请输入合同编码"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="签约数量">
                        <el-input
                                v-model.number="formInline.signNumber"
                                :disabled="state.disabled"
                                placeholder="请输入签约数量"
                        />
                    </el-form-item>
                </el-col>

<!--                <el-col :span="8">
                    <el-form-item label="项目分类">
                        <el-input
                                v-model="formInline.projectType"
                                :disabled="state.disabled"
                                placeholder="请选择项目分类"
                        />
                    </el-form-item>
                </el-col>-->

                <el-col :span="8">
                    <el-form-item label="周期时间" prop="serviceStartTime">
                        <el-date-picker
                                :disabled="state.disabled"
                                v-model="formInline.serviceTimeValue"
                                type="daterange"
                                placeholder="请选择"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD hh:ss:mm"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="甲方单位" prop="signPartyA">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyA"
                                placeholder="请输入甲方单位"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="乙方单位" prop="signPartyB">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyB"
                                placeholder="请输入乙方单位"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="三方单位" prop="signPartyThree">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyThree"
                                placeholder="请输入三方单位"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同金额" prop="contractAmount">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractAmount"
                                placeholder="请输入合同金额"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="资金流向" prop="capitalFlow">
                        <el-select
                                :disabled="state.disabled"
                                v-model="formInline.capitalFlow"
                                placeholder="请选择资金流向"
                        >
                            <el-option label="流入" :value="1" />
                            <el-option label="流出" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="签约时间" prop="signTime">
                        <el-date-picker
                                placeholder="请选择签约时间"
                                v-model="formInline.signTime"
                                type="date"
                                :disabled="state.disabled"
                                value-format="YYYY-MM-DD HH:mm:ss"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="合同概况内容说明" prop="contractContent">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractContent"
                                type="textarea"
                                placeholder="请输入合同概况内容说明"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="支付方式说明" prop="payExplain">
                        <el-input
                                v-model="formInline.payExplain"
                                type="textarea"
                                :disabled="state.disabled"
                                placeholder="请输入支付方式说明"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="签约方式说明" prop="signExplain">
                        <el-input
                                v-model="formInline.signExplain"
                                type="textarea"
                                :disabled="state.disabled"
                                placeholder="请输入签约方式说明"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="合同附件" prop="files">
                        <FileMinioUpload
                                :restriction="false"
                                :disabled="state.disabled"
                                :show-button="!state.disabled"
                                :restrictionLimit="9"
                                @updateFiles="updateFiles"
                                v-model:files="formInline.files"
                        />
                    </el-form-item>
                </el-col>
<!--                <el-col :span="5">
                    <el-form-item label="期数">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.payItem.term"
                                placeholder="请输入期数"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="资金流向">
                        <el-select
                                :disabled="state.disabled"
                                v-model="state.payItem.moneyFlowType"
                                placeholder="请选择资金流向"
                        >
                            <el-option label="流入" :value="1" />
                            <el-option label="流出" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="付款范围">
                        <el-date-picker
                                v-model="state.payItem.settlementStartTime"
                                type="daterange"
                                :disabled="state.disabled"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="金额">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.payItem.payableAmount"
                                placeholder="金额"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="2" v-if="!state.disabled">
                    <el-form-item label="" class="m-l10">
                        <el-button @click="addRow">添加结算方式</el-button>
                    </el-form-item>
                </el-col>-->
                <el-col :span="24">
                    <el-form-item label="合同结算方式"> </el-form-item>
                    <tableCom
                            class="table_class"
                            :tableHead="tableHead"
                            :tableData="formInline.fundPlans"
                            :isRadio="false"
                            border
                            :height="300"
                            :isSelection="false"
                    >
<!--                        <template #operate>
                            <el-table-column label="操作" width="200">
                                <template #default="{ row }">
                                    <el-button
                                            :disabled="state.disabled"
                                            size="small"
                                            type="primary"
                                            @click="deleteHandler(row)"
                                    >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </template>-->
                    </tableCom>
                </el-col>
            </el-row>
        </el-form>

      <span class="dialog-footer" v-if="!state.disabled">
<!--      <el-button @click="submit">发起审批</el-button>-->
      <el-button type="primary" @click="goBack" class="button_cancel2"> 取消 </el-button>
    </span>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
    ElDatePicker,
    ElRow,
    ElCol,
    ElForm,
    ElSelect,
    ElOption, ElMessage
} from 'element-plus'
import CommonTitle from '@/components/CommonTitle.vue'
import TableCom from '@/components/table/table.vue'
import { useRouter } from 'vue-router'
import FileMinioUpload from "@/components/FileMinioUpload.vue";
import {contractManagementApi} from "@/api/investment";

const router = useRouter();
const getContractId = router.currentRoute.value.params.contractId;

const state = reactive({
    auditStatus: [
        {
            label: '待审核',
            value: 1
        },
        {
            label: '审核成功',
            value: 2
        },
        {
            label: '审核驳回',
            value: 3
        }
    ],
    user: '',
    projectTaskId: '',
    projectId: '',
    itemId: '',
    type: '',
    payItem: {
        term: '',
        moneyFlowType: 1,
        settlementStartTime: [],
        // payId: nanoid()
    },
    disabled: true
})

const formInline = reactive({
    projectId: "",
    contractId: "",
    contractNumber: "",
    contractName: "",
    capitalFlow: "",
    typeContract:'',
    type: "",
    contractAmount: "",
    signNumber: "",
    signPartyA: "",
    signPartyB: "",
    signPartyThree: "",
    contractContent: "",
    payExplain: "",
    signTime: "",
    serviceStartTime: "",
    serviceEndTime: "",
    signExplain: "",
    files: [
       /* {
            fileName: "",
            fileUrlKey: "",
        }*/
    ],
    fundPlans: [
      /*  {
            term: "",
            payId: "",
            businessId: "",
            moneyFlowType: "",
            settlementStartTime: "",
            settlementEndTime: "",
            payableAmount: ""
        }*/
    ]
});

const rules = {
    capitalFlow:[
        { required: true, message: '资金流向不能为空!', trigger: 'change' }
    ],
    type:[
        { required: true, message: '合同类型不能为空!', trigger: 'blur' }
    ],
/*
    contractName: [
        { required: true, message: '合同名称不能为空', trigger: 'blur' }
    ],
    typeContract: [
        { required: true, message: '合同类型不能为空', trigger: 'blur' }
    ],
    contractId: [
        { required: true, message: '合同编号不能为空', trigger: 'blur' }
    ],
    signPartyA: [
        { required: true, message: '签约甲方不能为空', trigger: 'blur' }
    ],
    signPartyB: [
        { required: true, message: '签约乙方不能为空', trigger: 'blur' }
    ],

    contractAmount: [
        { required: true, message: '合同金额不能为空', trigger: 'blur' }
    ],

    serviceStartTime: [
        { required: true, message: '服务期限不能为空', trigger: 'blur' }
    ],
    signTime: [
        { required: true, message: '合同签订日期不能为空', trigger: 'blur' }
    ],
    contractContent: [
        { required: true, message: '合同内容不能为空', trigger: 'blur' }
    ],
    payExplain: [
        { required: true, message: '支付方式不能为空', trigger: 'blur' }
    ],
    remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
    files: [{ required: true, message: '附件不能为空', trigger: 'blur' }]*/
}

const tableData = ref([])

const tableHead = ref([
    {
        prop: 'term',
        label: '期数'
    },
    {
        prop: 'moneyFlowType',
        label: '款项说明',
        formatter: (row) => {
            return row.moneyFlowType === 1 ? '流入' : '流出'
        }
    },
    {
        prop: 'settlementStartTime',
        label: '预计时间',
        formatter: (row) => {
            // return row.settlementStartTime.join('-')
            return row.settlementStartTime + '-' + row.settlementEndTime;
        }
    },
    {
        prop: 'payableAmount',
      label: '预计收支金额',
      width: 120,
    }
])
const handel = () => {}
const deleteHandler = (row) => {
    tableData.value = tableData.value.filter((item) => item.payId !== row.payId)
}
const addRow = () => {
    tableData.value.push(JSON.parse(JSON.stringify(state.payItem)))
}

/**
 * 返回
 */
const goBack = () => {
    router.go(-1)
}

const updateFiles = (e) => {

}

const formRef = ref(null)
const submit = () => {
    formRef.value.validate(async (valid, fields) => {
        if (valid) {
            // 新增合同款项信息
            contractManagementApi.createContract(formInline).then(res=>{
                if(res.code === '200'){
                    ElMessage.success('发起审批成功!');
                    goBack();
                }else{
                    ElMessage.error('发起审批失败!');
                }
            });
        }
    })
}

/**
 * 查询合同信息
 */
const getContractAndFundPlanDetail = (contractId) => {
    contractManagementApi.getContractAndFundPlanDetail(contractId).then(res=>{
        if(res.code === '200'){
            for (let k1 in formInline){
                for (let k2 in res.data){
                    if(k1 === k2){
                        if(k1==='serviceStartTime'){
                            formInline['serviceTimeValue'] = [res.data[k2],res.data['serviceEndTime']];
                        }
                        formInline[k1] = res.data[k2];
                    }
                }
            }
        }
    });
}

onMounted(()=>{
    getContractAndFundPlanDetail(getContractId);
});
</script>

<style lang="scss" scoped>
.el-form-item,
.el-select {
  width: 100%;
}
.box {
  border-radius: 10px;
  border: 1px solid #e3e7f1;
  padding: 34px 90px;
}
.table_class {
  margin-top: 20px;
  margin-bottom: 20px;
}
:deep(.el-input__wrapper) {
  width: 100%;
  height: 40px;
}
:deep(.el-date-editor) {
  width: 100%;
  height: 40px;
}
</style>
